<template>
  <div class="ep-home-epyagemap" style="width:100%">
    <!-- <div class="top">
      <div class="flex">
        <div class="l"></div>
        <div class="r">出勤率=实际出勤天数/应出勤天数x100%</div>
      </div>
    </div> -->
    <!-- <div class="cobody db-echartstent"> -->
      <echarts
        :options="option"
        :auto-resize="true"
        style="width: 100%;height:200px"
      ></echarts>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  name: 'cdp-epy-attendanceRate-map',
  data () {
    return {
      option: {}
    }
  },
  created () {
    this.getEpyData()
  },
  methods: {
    getEpyData () {
      this.option = {
        tooltip: {
          backgroundColor: 'rgba(255,255,255,0.8)',
          padding: [5, 45, 5, 20],
          extraCssText:
            'box-shadow: 0px 0px 8px 0px rgba(150,178,191,0.5);line-height:30px; white-space:pre-wrap',
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          textStyle: {
            color: '#313131',
            fontFamily: 'PingFangSC, PingFangSC-Regular',
            fontSize: 12,
            fontWeight: 400,
            align: 'left'
          },
          // axisPointer: {
          //   type: "shadow",
          //   shadowStyle: { color: "rgba(45,153,255,0.08)" }
          // },
          formatter: name => {
            let arr = ''
            const { marker, seriesName, value } = name[0]
            arr +=
              marker +
              '&nbsp;' +
              seriesName +
              '&nbsp;&nbsp;' +
              value +
              '%' +
              '\n'
            return arr
          }
        },
        legend: {
          type: 'scroll',
          icon: 'circle',
          itemHeight: 8,
          itemWidth: 8,
          right: '4%',
          top: '12%',
          itemGap: 20,
          textStyle: {
            color: '#485465'
          }
        },
        grid: {
          left: '7px',
          right: '30px',
          top: '20px',
          bottom: '5px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2020-08', '9月', '10月', '11月', '12月', '2021-01'],
          axisLabel: {
            interval: 0,
            color: '#C9CFD4',
            fontSize: 10,
            fontFamily: 'DINAlternate, DINAlternate-Bold',
            fontWeight: 400
          },
          axisLine: {
            lineStyle: {
              color: '#eee'
              // width: 4
            }
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              color: '#eee',
              width: 1
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%',
            color: '#C9CFD4',
            fontSize: 10
            // interval: 1
          },
          axisLine: {
            lineStyle: {
              color: '#eee',
              width: 1
            }
          },
          splitLine: {
            // 网格线
            lineStyle: {
              color: ['#eee'],
              width: 1,
              type: 'solid'
            }
          }
        },
        series: [
          {
            symbol: 'circle',
            symbolSize: 8,
            smooth: true,
            name: '更新率',
            type: 'line',
            itemStyle: {
              color: '#FFD395',
              borderColor: '#fff',
              borderWidth: 4,
              shadowColor: 'rgba(255, 233, 177, .5)',
              shadowBlur: 0
            },
            lineStyle: {
              width: 4,
              shadowBlur: 6,
              shadowColor: 'rgba(255,233,177,0.8)',
              shadowOffsetX: 0,
              shadowOffsetY: 4
            },
            data: [0, 0, 0, 0, 89, 20]
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ep-home-epyagemap {
}
.top {
  position: absolute;
  top: 61px;
  .flex {
    width: 252px;
    height: 24px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 4px;
    padding: 3px 5px 4px 10px;
    box-sizing: border-box;
    .l {
      width: 4px;
      height: 4px;
      background: #3fa5ed;
      border-radius: 50%;
    }
    .r {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #3fa5ed;
    }
  }
}
</style>
